<template>
	<view class="content">
		<u-empty v-if="images.length <= 0" mode="list" width="50%" textSize="30"
			icon="http://cdn.uviewui.com/uview/empty/list.png">
		</u-empty>
		<view class="box">
			<image v-for="(item,index) in images" :key="index" @click="getImage(item.image)"
				:src="item.image ? $u.fileBaseUrl+ item.image : '../../static/images/index/zwtp.png' "
				mode="scaleToFill">
			</image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: 0,
				attractionId: 0,
				page: {
					pageNum: 1,
					pageSize: 10
				},
				images: []
			};
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.attractionId = options.attractionId
			console.log(options);
			this.getphotodetails()
		},
		methods: {
			async getphotodetails() {
				let res = await this.$u.api.getphotodetails({
					orderId: this.orderId,
					attractionId: this.attractionId,
					pageNum: this.page.pageNum,
					pageSize: this.page.pageSize
				})
				if (res.code == 200) {
					// 如果是第一页，直接替换数据
					if (this.page.pageNum == 1) {
						this.images = res.rows;
					} else {
						// 如果不是第一页，追加数据
						this.images = [...this.images, ...res.rows];
					}
					this.total = res.total;
				}
			},
			// 上拉加载
			loadMore() {
				if (this.images.length >= this.total) {
					uni.showToast({
						title: '没有更多图片了',
						icon: "none"
					});
					return;
				}

				this.page.pageNum += 1;
				uni.showLoading({
					title: '加载中...'
				});

				this.getphotodetails().then(() => {
					uni.hideLoading();
				}).catch(error => {
					console.error('加载更多数据时出错:', error);
					uni.hideLoading();
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
				});
			},
			// 预览
			getImage(images) {
				let img = this.images.map(path => this.$u.fileBaseUrl + path.image);
				uni.previewImage({
					current: this.$u.fileBaseUrl + images, // 当前显示图片的http链接
					urls: img // 需要预览的图片http链接列表
				})
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 刷新数据的逻辑
			this.page.pageNum = 1
			this.page.pageSize = 10
			this.getphotodetails()
			// 模拟异步操作
			setTimeout(() => {
				// 刷新完成后，结束下拉刷新
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 上拉加载
		onReachBottom() {
			this.loadMore();
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;

		.box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 0 20rpx 0 0;
				margin: 0 20rpx;
			}
		}
	}
</style>